<%@page contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
	<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/document.css" />
	<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" />
	<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/form/resources/Rating.css" />

	<!--  script type="text/javascript" src="../resources/scripts/createArticle.js"></script-->
	<!--  script type="text/javascript" src="<c:url value="/resources/scripts/footballblogApiClient.js" />"></script-->
	<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"></script>          
    <script data-dojo-config="async: true"></script>         
	<script>
	if(typeof(dojo) !== "undefined") {
		console.log("dojo loaded");
	}else{
		console.log("dojo did not loaded");
	}
	</script>
	<script type="text/javascript" src="<c:url value="/resources/scripts/Rating_disabledFix.js" />"></script>
	<script type="text/javascript" src="<c:url value="/resources/scripts/footballblogApiClient.js" />"></script>
	
	<title>View Article</title>
</head>
<body class="claro">
<div style="margin-left:25%;margin-right:25%">
<jsp:include page="header.jsp"/>

<h1>
	View Article!  
</h1>

<P>  The time on the server is ${serverTime}. </P>

<div id="authorPic">
	<img src="${articleDto.authorDto.bigPicUrl}"/>
	<a href="https://twitter.com/${articleDto.authorDto.screenName}" class="twitter-follow-button" data-show-count="false" data-size="large">Follow ${articleDto.authorDto.screenName}</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div id="authorName">${articleDto.authorDto.name}</div>
<br>
<div id="articleTitle">Article Title: ${articleDto.articleTitle}</div>
<div id="articleDate">Article Date: ${articleDto.createdOn}</div>
<br>
<div id="articleText" style="border:2px solid;border-radius:25px;padding: 15px;">${articleDto.articleText}</div>
<br>
<div>Rate this article (${articleDto.numberOfRatings} readers rated this article!):</div>
<div id="articleRating" data-dojo-type="dojox/form/Rating_disabledFix" data-dojo-props="value:Math.round(${articleDto.averageRating})"></div>
<div id="tweetButton">
<br>
<a href="https://twitter.com/share" class="twitter-share-button" data-size="large">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<!--  div id="articleRating"></div-->
<br>
<h1>Comments Section:</h1>
	<jsp:include page="/test/viewcomments"/>
</div>
</body>
	<!-- load Dojo -->
      <!--  script type="text/javascript" src="//localhost:8081/staticresources/javascriptlib/dojo/dojo/dojo.js"></script-->

	<script>
	require(["footballblog/FootballblogApiClient", "dojo/parser", "dijit/registry", "dojox/form/Rating_disabledFix", "dijit/form/Button", "dojo/dom", "dojo/on"], 
			function(FootballblogApiClient, parser, registry, Rating, button, dom, on){
		parser.parse();
		//var articleRating = new Rating(null, dom.byId("articleRating"));

		/*the event is triggered twice for some reason, need to trigger it only for 1 change*/
		var isRatingChanged = false;
		var apiClient = new FootballblogApiClient();
		on(registry.byId("articleRating"), "change", function(){			
			if(!isRatingChanged){
				var articleRatingWidget = registry.byId("articleRating");
				console.log("changed the rating to: " + articleRatingWidget.value);
				articleRatingWidget.set("disabled", true);
				isRatingChanged = true;
				apiClient.postArticleRating("${articleDto.articleId}", articleRatingWidget.value, function(){
					console.log("in call back after rating post");
				});
			}
		});
	});
    </script>


</html>
